<template>
    <div class="settings-page">
        <el-page-header @back="goBack">
            <template #content>
                <span class="text-large font-600 mr-3">偏好设置</span>
            </template>
        </el-page-header>

        <div class="settings-content">
            <el-card shadow="never">
                <template #header>
                    <div class="card-header">
                        <span>上传设置</span>
                    </div>
                </template>
                <el-form :model="settingsForm" label-position="right" label-width="200px">
                    <el-form-item label="默认分片大小 (MB)">
                        <el-input-number v-model="settingsForm.defaultChunkSize" :min="1" :max="5120" />
                        <div class="setting-description">
                            用于“分片上传”模式的默认分片尺寸。此设置可在每次上传的高级选项中被覆盖。
                        </div>
                    </el-form-item>

                    <el-form-item label="同时上传的任务数">
                        <el-input-number v-model="settingsForm.concurrentTasks" :min="1" :max="10" />
                        <div class="setting-description">
                            控制传输列表中可以同时处于“上传中”状态的任务数量。
                        </div>
                    </el-form-item>

                    <el-form-item label="分片并发数">
                        <el-input-number v-model="settingsForm.concurrentChunks" :min="1" :max="10" />
                        <div class="setting-description">
                            对于单个分片上传任务，控制可以同时上传的分片(chunk)数量。
                        </div>
                    </el-form-item>
                    <el-form-item label="分片最大重试次数">
                        <el-input-number v-model="settingsForm.chunkMaxRetries" :min="0" :max="10" />
                        <div class="el-form-item__description">
                            当单个分片上传失败时，系统将自动重试的最大次数。设置为 0 则不重试。
                        </div>
                    </el-form-item>

                    <el-form-item label="分片重试基础延迟 (毫秒)">
                        <el-input-number v-model="settingsForm.chunkRetryDelay" :min="500" :max="10000" :step="100" />
                        <div class="el-form-item__description">
                            首次重试前的等待时间。后续重试的延迟会以指数级增加（例如 2s, 4s, 8s...）。
                        </div>
                    </el-form-item>
                    <el-form-item label="URL上传分片大小 (MB)">
                        <el-input-number v-model="settingsForm.urlUploadChunkSize" :min="1" :max="5120" />
                        <div class="setting-description">
                            用于“从URL上传”功能。后端将以此大小为基准，从来源URL下载数据并进行分片。
                        </div>
                    </el-form-item>
                </el-form>
            </el-card>

            <el-card shadow="never" class="settings-card">
                <template #header>
                    <div class="card-header">
                        <span>下载设置</span>
                    </div>
                </template>
                <el-form :model="settingsForm" label-position="right" label-width="200px">
                    <el-form-item label="预签名URL默认有效期(秒)">
                        <el-input-number v-model="settingsForm.presignedUrlExpiration" :min="1" :max="604800" />
                        <div class="setting-description">
                            在文件详情、导出URL列表等功能中生成的临时下载链接的默认有效时间。最大为7天 (604800秒)。
                        </div>
                    </el-form-item>
                </el-form>
            </el-card>

            <div class="save-button-container">
                <el-button type="primary" @click="saveSettings">保存设置</el-button>
                <el-button @click="resetToDefaults">恢复默认</el-button>
            </div>

        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useSettingsStore } from '@/stores';

const router = useRouter();
const settingsStore = useSettingsStore();

// 使用一个响应式对象来绑定表单数据，便于管理
const settingsForm = ref({
    defaultChunkSize: 10,
    concurrentTasks: 3,
    concurrentChunks: 3,
    presignedUrlExpiration: 3600,
    urlUploadChunkSize: 10,
    chunkMaxRetries: 3,
    chunkRetryDelay: 2000,
});

// 组件加载时，从 store 中读取已保存的设置来填充表单
onMounted(() => {
    settingsForm.value.defaultChunkSize = settingsStore.defaultChunkSize;
    settingsForm.value.concurrentTasks = settingsStore.concurrentTasks;
    settingsForm.value.concurrentChunks = settingsStore.concurrentChunks;
    settingsForm.value.presignedUrlExpiration = settingsStore.presignedUrlExpiration;
    settingsForm.value.urlUploadChunkSize = settingsStore.urlUploadChunkSize;
    settingsForm.value.chunkMaxRetries = settingsStore.chunkMaxRetries;
    settingsForm.value.chunkRetryDelay = settingsStore.chunkRetryDelay;
});

const saveSettings = () => {
    // 调用 store 中的 action 来更新和持久化所有设置
    settingsStore.setDefaultChunkSize(settingsForm.value.defaultChunkSize);
    settingsStore.setConcurrentTasks(settingsForm.value.concurrentTasks);
    settingsStore.setConcurrentChunks(settingsForm.value.concurrentChunks);
    settingsStore.setPresignedUrlExpiration(settingsForm.value.presignedUrlExpiration);
    settingsStore.setUrlUploadChunkSize(settingsForm.value.urlUploadChunkSize);
    settingsStore.setChunkMaxRetries(settingsForm.value.chunkMaxRetries);
    settingsStore.setChunkRetryDelay(settingsForm.value.chunkRetryDelay);
    ElMessage.success('设置已成功保存！');
};

const resetToDefaults = () => {
    // 调用 store 中的 action 来重置
    settingsStore.resetToDefaults();

    // 同步更新当前页面的表单
    settingsForm.value.defaultChunkSize = settingsStore.defaultChunkSize;
    settingsForm.value.concurrentTasks = settingsStore.concurrentTasks;
    settingsForm.value.concurrentChunks = settingsStore.concurrentChunks;
    settingsForm.value.presignedUrlExpiration = settingsStore.presignedUrlExpiration;
    settingsForm.value.urlUploadChunkSize = settingsStore.urlUploadChunkSize;
    settingsForm.value.chunkMaxRetries = settingsStore.chunkMaxRetries;
    settingsForm.value.chunkRetryDelay = settingsStore.chunkRetryDelay;
    ElMessage.info('已恢复为默认设置。');
};

const goBack = () => router.back();
</script>

<style scoped>
.settings-page {
    padding: 20px;
}

.settings-content {
    margin-top: 20px;
}

.settings-card {
    margin-top: 20px;
}

.card-header {
    font-weight: bold;
}

.setting-description {
    font-size: 12px;
    color: #909399;
    line-height: 1.5;
    margin-top: 4px;
}

.save-button-container {
    margin-top: 30px;
    display: flex;
    gap: 12px;
}
</style>